<template>
  <view class="p-3">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view
      class="position-relative mt-1"
      v-for="(item, key) in cardList"
      :key="key"
      @tap="toDetail(item.id)"
    >
      <view class="card-box">
        <view class="flex align-center">
          <image src="/static/images/mine/vip.png" class="vip-img"></image>
          <text class="ml-1">{{ item.name }}</text>
        </view>
        <view class="font-price">{{ item.price }}元</view>
        <view class="font-time">{{
          item.period == 0 ? currentLanguageTexts.permanentlyValid : item.period + currentLanguageTexts.monthValidityPeriod
        }}</view>
        <view class="font-more">{{currentLanguageTexts.morePrivileges}}</view>
      </view>
      <view class="cart-box-bg"><image :src="item.styleImg"></image></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getCardList } from '@/api/user';
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/store';
const main = useMainStore();
const { currentLanguageTexts } = storeToRefs(main)
const title = ref(currentLanguageTexts.value.membershipCard);
const cardList = ref([]);

onShow(() => {
  getList();
});

const getList = async () => {
  let data = await getCardList();
  if (data) {
    cardList.value = data;
  }
};
const toDetail = (id) => {
  uni.navigateTo({
    url: '/pages/components/pages/vip/detail?id=' + id,
  });
};
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
page {
  background-color: transparent;
}
/* #endif */
.card-box {
  color: #ffffff;
  height: 400rpx;
  padding: 30rpx;
  text-align: center;

  .font-price {
    margin-top: 50rpx;
    font-size: 50rpx;
  }
  .font-time {
    margin-top: 10rpx;
    font-size: 24rpx;
  }
  .font-more {
    margin-top: 80rpx;
    font-size: 24rpx;
  }
}
.vip-img {
  width: 40rpx;
  height: 40rpx;
}
.cart-box-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  image {
    width: 690rpx;
    height: 400rpx;
  }
}
</style>
